<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
			padding: 0px;margin:0px;list-style: none;
		}
		.tab{
			width:300px;
			border: 1px solid red;
			margin:50px auto;
		}
		.tab_title{
			height: 36px;line-height: 36px;background: #ccc;
		}
		.tab_title a{
			color:black;
			text-decoration: none;
			padding: 0 12px;
		}
		.tab_title a.active{
			color:red;
			font-weight: bold;
			text-decoration: underline;
		}
		.tab_content{
			padding: 10px;
		}
		.tab_content ul{
			display: none;
		}
    </style>
</head>
<body>
    <div class="tab">
		<div class="tab_title">
			<a href="javascript:;" class="active">公告</a> 
			<a href="javascript:;">规则</a> 
			<a href="javascript:;">论坛</a> 
			<a href="javascript:;">安全</a> 
			<a href="javascript:;">公益</a>
		</div>
		<div class="tab_content">
			<ul style="display: block;">
				<li><a href="#">淘宝造物节1111111</a></li>
				<li><a href="#">美食成家具纸飞机永不落地1111111</a></li> 
				<li><a href="#">阿里智能服务2.0来临1111111</a></li> 
				<li><a href="#">阿里巴巴9.5公益周1111111</a></li>
			</ul>
			<ul>
				<li><a href="#">淘宝造物节2222222</a></li>
				<li><a href="#">美食成家具纸飞机永不落地2222222</a></li> 
				<li><a href="#">阿里智能服务2.0来临2222222</a></li> 
				<li><a href="#">阿里巴巴9.5公益周2222222</a></li>
			</ul>
			<ul>
				<li><a href="#">淘宝造物节333333333</a></li>
				<li><a href="#">美食成家具纸飞机永不落地333333333</a></li> 
				<li><a href="#">阿里智能服务2.0来临333333333</a></li> 
				<li><a href="#">阿里巴巴9.5公益周333333333</a></li>
			</ul>
			<ul>
				<li><a href="#">淘宝造物节4444444444</a></li>
				<li><a href="#">美食成家具纸飞机永不落地4444444444</a></li> 
				<li><a href="#">阿里智能服务2.0来临4444444444</a></li> 
				<li><a href="#">阿里巴巴9.5公益周4444444444</a></li>
			</ul>
			<ul>
				<li><a href="#">淘宝造物节5555555555</a></li>
				<li><a href="#">美食成家具纸飞机永不落地5555555555</a></li> 
				<li><a href="#">阿里智能服务2.0来临5555555555</a></li> 
				<li><a href="#">阿里巴巴9.5公益周5555555555</a></li>
			</ul>
		</div>
	</div>


    <script>
        // let tabTitle = document.querySelectorAll('.tab .tab_title a');
        // let tabContent = document.querySelectorAll('.tab .tab_content ul');
        // console.log(tabTitle);
        // console.log(tabContent);

        // for(let i=0;i<tabTitle.length;i++){
        //     tabTitle[i].index = i;
        //     tabTitle[i].onclick = function(){
        //         let oActive = document.querySelector('.active');
        //         oActive.className = '';
        //         this.className = 'active';
                
        //         for(let j=0;j<tabContent.length;j++){
        //             tabContent[j].style.display = 'none';
        //         }
        //         tabContent[this.index].style.display = 'block';
        //     }
        // }




        function Tap(){
            this.tabTitle = document.querySelectorAll('.tab .tab_title a');
            this.tabContent = document.querySelectorAll('.tab .tab_content ul');
            // console.log(this.tabTitle);
            // console.log(this.tabContent);
            let _this = this;
            this.init = function(){
                for(let i=0;i<this.tabTitle.length;i++){
                    this.tabTitle[i].index = i;
                    this.tabTitle[i].onclick = function(){
                        // let that = this;
                        _this.activeSH(this);
                        _this.ULshowHide(this);
                    }
                }
            }
            this.activeSH = function(that){
                let oActive = document.querySelector('.active')
                // console.log(oActive);
                oActive.className = '';
                that.className = 'active';
            }
            this.ULshowHide = function(that){
                for(let j=0;j<this.tabContent.length;j++){
                    this.tabContent[j].style.display = 'none';
                }
                this.tabContent[that.index].style.display = 'block'
            }
        }
        let tap = new Tap();
        tap.init()
    </script>
</body>
</html>